<template>
  <div id="productDetails">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="top">
        <div>
          <div>
            <!-- <p>{{$t('m.tips15_8')}}</p> -->
            <p>{{$t('m.lc1')}}</p>
            <p>20000 VC</p>
          </div>
          <div>
            <!-- <p>{{$t('m.tips15_7')}}</p> -->
            <p>{{$t('m.lc2')}}</p>
            <p>50 VC</p>
          </div>
        </div>
        <p>
          <span>1600{{$t('m.reservation')}}</span>
          <span>{{$t('m.tips15_5')}}</span>
          <span>{{$t('m.regularProduct')}}</span>
        </p>
      </div>

      <div class="content">
        <div class="title">
          <span>{{$t('m.fp')}}</span>
          <!-- <div class="btn disabled" @click="pickVcAll">{{$t('m.fp3')}}</div> -->
        </div>
        <div class="list">
          <div class="list_title">
            <span>{{$t('m.fundName')}}</span>
            <span>{{$t('m.releaseQuantity')}}</span>
            <span>{{$t('m.status')}}</span>
            <span>{{$t('m.releaseTime')}}</span>
          </div>
          <ul>
            <li v-for="(i,e) in vclist" :key="e">
              <span>VC</span>
              <span>{{i.amount}}</span>
              <span v-if="i.pickStatus == 1">{{$t('m.fp1')}}</span>
              <span v-else>{{$t('m.fp2')}}</span>
              <span>
                <label>{{i.pickDay}}</label>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div v-if="wdyUsdtOrder.length <1" class="notData">
        <img src="@/assets/img/new1/reac/nodata.png" alt />
        <p>{{$t('m.noTransaction')}}</p>
      </div>
      <div
        class="top"
        v-for="(item,index) in wdyUsdtOrder"
        :key="index"
        v-if="wdyUsdtOrder.length >0"
        @click="goDetail(item)"
      >
        <div>
          <div>
            <p>
              <img src="@/assets/img/new/logo@2x.png" alt />
              {{item.extraData.wdyFinancial.productName}}
            </p>
            <p>{{item.extraData.wdyFinancial.productTerm}}{{$t('m.tips15_3')}}</p>
          </div>
          <div>
            <p>{{$t('m.minimum')}}</p>
            <p class="fontweight">20.00%</p>
          </div>
        </div>
        <p>
          <span>{{$t('m.tips15_4')}}</span>
          <span>{{$t('m.tips15_5')}}</span>
          <span>{{item.extraData.wdyFinancial.closingTime}}{{$t('m.tips15_6')}}</span>
        </p>
        <div class="detail">
          <h2>{{$t('m.productDetails')}}</h2>
          <p>
            <span>{{$t('m.amount')}}(USDT)</span>
            <span>{{$t('m.purchaseTime')}}</span>
            <span>{{$t('m.status')}}</span>
            <span>{{$t('m.income')}}(USDT)</span>
          </p>
          <p>
            <span>{{item.usdtAmount}}</span>
            <span>{{item.createTime}}</span>
            <span>{{$t('m.bought')}}</span>
            <span>{{(item.usdtAmount*1.01).toFixed(2)}}</span>
          </p>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      wdyUsdtOrder: [],
      userObj: {},
      vclist: [],
      vcid: ""
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.vcid = this.$route.query.vcid;
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      if (res.code == "0000") {
        this.userObj = res.user;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        sessionStorage.setItem("loginBack", true);
        this.$router.push(`/login`);
      }
    });
    let category = 0;
    if (localStorage.getItem("language") == "en_US") {
      category = 1;
    } else {
      category = 0;
    }
    // 获取理财产品
    // Services.getWdyUsdtOrder({
    //   token: this.loginToken,
    //   //   pageNum:1,
    //   //   pageSize:10,
    //   //   category:category,
    //   lang: localStorage.getItem("language")
    // }).then(res => {
    //   if (res.code == "0000") {
    //     if (res.list.length > 0) {
    //       this.flage = true;
    //       // this.wdyUsdtOrder = res.list;
    //     } else {
    //       this.flage = false;
    //     }
    //   }
    // });
    this.getList();
    this.changeTitle(this.$t("m.financialProduct"));
  },
  components: { Header },
  computed: {},
  mounted() {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    goDetail(item) {
      this.$router.push(
        `/productDetails?&id=${item.extraData.wdyFinancial.productId}`
      );
    },
    // 获取vc记录
    getList() {
      Services.getVcHistory({
        token: this.loginToken,
        buyProductId: this.vcid,
        lang: localStorage.getItem("language")
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          this.vclist = res.list;
        } else {
          Toast(res.msg);
        }
      });
    },
    // 一键领取
    pickVcAll() {
      Services.pickVcAll({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if ((res.code = "0000")) {
          console.log(res);
          this.getList();
          Toast(res.msg);
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#productDetails {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow-y: scroll;
    .top {
      padding: 0.5rem 0.3rem 0;
      min-height: 3.2rem;
      box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
      > div {
        display: flex;
        margin-bottom: 0.4rem;
        div {
          flex: 1;
          p {
            text-align: center;
            &:nth-of-type(2) {
              font-size: 0.4rem;
              padding-top: 0.2rem;
              font-weight: 700;
              color: #fd6262;
            }
          }
        }
        &.detail {
          display: block;
          padding-top: 0.4rem;
          margin-bottom: 0.1rem;
          p {
            display: flex;
            span {
              flex: 1;
              display: flex;
              justify-content: center;
              padding-bottom: 0.1rem;
              &:nth-last-child {
                padding: 0;
              }
            }
          }
        }
      }
      > p {
        display: flex;
        justify-content: space-between;
        span {
          width: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 0.02rem solid #fff;
          padding: 0.06rem 0;
          border-radius: 0.08rem;
          font-size: 0.24rem;
        }
      }
    }
    .content {
      padding: 0.5rem 0.3rem;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          font-size: 0.3rem;
          font-weight: bold;
        }
        .btn {
          width: 2rem;
          height: 0.75rem;
          line-height: 0.75rem;
          margin: 0;
          background: linear-gradient(to right, #ecca96, #d0a060);
        }
      }
      .list {
        margin-top: 0.2rem;
        .list_title {
          height: 1rem;
          background: #f3f3f3;
          box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
          display: flex;
          padding-left: 0.15rem;
          justify-content: space-between;
          span {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #8a8a8a;
            width: 20%;

            &:nth-of-type(2) {
              width: 25%;
            }
            &:last-child {
              flex: 1;
              //   justify-content: flex-end;
            }
          }
        }
        ul {
          min-height: 3rem;
          background: #fff;
          padding: 0.1rem 0;
          li {
            padding-left: 0.15rem;
            width: 100%;
            height: 0.75rem;
            // line-height: 0.75rem;
            font-size: 0.24rem;
            color: #8a8a8a;
            font-weight: normal;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f2f2f2;
            align-items: center;
            &:nth-of-type(2n) {
              background: #f8f8f8;
            }
            &:nth-last-of-type(1) {
              border-bottom: none;
            }
            span {
              display: flex;
              justify-content: center;
              align-items: center;
              color: #8a8a8a;
              width: 20%;

              &:nth-of-type(2) {
                width: 25%;
              }
              &:last-child {
                flex: 1;
                label {
                  display: block;
                  text-align: center;
                }
                // justify-content: flex-end;
              }
            }
          }
        }
      }
    }
    // .top {
    //   /*padding: 0.5rem 0.3rem 0;*/
    //   margin: 0.5rem 0.3rem;
    //   padding: 0 0.2rem;
    //   min-height: 2.8rem;
    //   background: #434551;
    //   /*background: #30323e;*/
    //   border: 0.02rem solid #30323e;
    //   border-radius: 0.1rem;
    //   box-shadow: 0.04rem 0.04rem 0.2rem 0.02rem #30323e;
    //   color: #fff;
    //   > div {
    //     display: flex;
    //     margin-bottom: 0.4rem;
    //     div {
    //       flex: 1;
    //       p {
    //         display: flex;
    //         align-items: center;
    //         justify-content: center;
    //         padding-top: 0.2rem;
    //         img {
    //           width: 0.36rem;
    //           margin-right: 0.1rem;
    //           height: 0.36rem;
    //         }
    //         &.fontweight {
    //           font-size: 0.4rem;
    //           font-weight: 700;
    //         }
    //       }
    //     }
    //     &.detail {
    //       display: block;
    //       padding-top: 0.4rem;
    //       margin-bottom: 0.1rem;
    //       p {
    //         display: flex;
    //         span {
    //           flex: 1;
    //           display: flex;
    //           justify-content: center;
    //           padding-bottom: 0.1rem;
    //           &:nth-last-child {
    //             padding: 0;
    //           }
    //         }
    //       }
    //     }
    //   }
    //   > p {
    //     display: flex;
    //     justify-content: space-between;
    //     span {
    //       width: 30%;
    //       display: flex;
    //       align-items: center;
    //       justify-content: center;
    //       border: 0.02rem solid #fff;
    //       padding: 0.06rem 0;
    //       border-radius: 0.08rem;
    //       font-size: 0.24rem;
    //     }
    //   }
    // }
    // h2 {
    //   font-size: 0.32rem;
    //   color: #c0c1c4;
    //   margin-bottom: 0.2rem;
    //   span {
    //     border: 0.02rem solid #fff;
    //     padding: 0.06rem 0.16rem;
    //     border-radius: 0.08rem;
    //     font-size: 0.24rem;
    //     color: #fff;
    //     margin: 0 0.1rem;
    //     &.active {
    //       background: #912cee;
    //     }
    //   }
    // }

    .notData {
      color: #fff;
      padding: 1.5rem;
      text-align: center;
      img {
        width: 2.5rem;
        height: auto;
        display: inline-block;
        margin-bottom: 0.4rem;
      }
    }
  }
}
</style>